<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    
.container{
    display: flex;
   align-items: center;
    width: 1000px;
    height: 500px;
   
}
.item1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    padding: 5px 5px;
    border-radius: 20px;
    border: 1px solid;
} 
.item2{
    display: flex;
    /* 居中 */
    align-items: center;
    /* 主轴 */
    flex-direction: column;
    /* 黑点之间的间隔 */
    justify-content: space-between;

    border-radius: 20px;
    border: 1px solid;
    width: 120px;
    height: 120px;
    padding: 5px 5px;
} 
.item3{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 20px;
    border: 1px solid;
    width: 120px;
    height: 120px;
    padding: 5px 5px;
} 
.item3>.item-warp3{
    display: flex;
    flex-direction: row-reverse;
}
.item3>.item-warp2{
    display: flex;
    justify-content: center;
}

.item4{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 120px;
    height: 120px;
    padding: 5px 5px;
    border-radius: 20px;
    border: 1px solid;
}
.item4>.item-warp1{
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
.item4>.item-warp3{
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}
.item5{
    justify-content: space-between;
    display: flex;
    width: 120px;
    height: 120px;
    padding: 5px 5px;
    border-radius: 20px;
    border: 1px solid;
}
.item5>.item-warp1{
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
.item5>.item-warp2{
    display: flex;
    align-items: center;
}
.item5>.item-warp3{
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}

.item6{
    display: flex;
    justify-content: space-between;
    width: 120px;
    height: 120px;
    padding: 5px 5px;
    border-radius: 20px;
    border: 1px solid;
}
.item6>.item-warp1{
    display: flex;
    flex-direction: column;
    justify-content: space-between;  
}
.item6>.item-warp2{
    display: flex;
    flex-direction: column;
    justify-content: space-between;  
}
.item6>.item-warp3{
    display: flex;
    flex-direction: column;
    justify-content: space-between;  
}

.item7{
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    width: 120px;
    height: 120px;
    padding: 5px 5px;
    border-radius: 20px;
    border: 1px solid;
}
/* 让i7的黑点变成行内块状元素 */

.item7>.item-warp1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.item7>.item-warp2{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.item7>.item-warp3{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.item8{
     flex-direction: column;
    justify-content: space-between;
    display: flex;
    width: 120px;
    height: 120px;
    padding: 5px 5px;
    border-radius: 20px;
    border: 1px solid;
}
.item8>.item-warp1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.item8>.item-warp2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.item8>.item-warp3{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


/* 骰子 */
.touzi{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 10px solid;
    background-color: #000;
}
/* .item3 .touzi:nth-child(2){
    align-self: center;
    (这个是用了元素选择器单独选择一个子代元素进行样式改变的)
} */
</style>
<body>
    <div class="container">
        <!-- 1个骰子 -->
        <div class="item1">
            <div class="touzi"></div>
        </div>
       <!-- 2个骰子 -->
        <div class="item2">
            <div class="touzi"></div>
            <div class="touzi"></div>
        </div>
         <!-- 3个骰子 -->
        <div class="item3">
            <div class="item-warp1">
                <div class="touzi"></div>
            </div>
            <div class="item-warp2">
                <div class="touzi"></div>
            </div>
            <div class="item-warp3">
                <div class="touzi"></div>
            </div>    
        </div>
         <!-- 4个骰子 -->
        <div class="item4">
            <div class="item-warp1">
                <div class="touzi"></div>
                <div class="touzi"></div>
            </div>
            <div class="item-warp3">
                <div class="touzi"></div>
                <div class="touzi"></div>
            </div>
        </div> 
         <!-- 5个骰子 -->
        <div class="item5">
            <div class="item-warp1">
                <div class="touzi"></div>
                <div class="touzi"></div>
            </div>
            <div class="item-warp2">
                <div class="touzi"></div>
            </div>
            <div class="item-warp3">
                <div class="touzi"></div>
                <div class="touzi"></div>
            </div>    
        </div> 
         <!-- 6个骰子 -->
        <div class="item6">
            <div class="item-warp1">
                <div class="touzi"></div>
                <div class="touzi"></div>
            </div>
            <div class="item-warp2">
                <div class="touzi"></div>
                <div class="touzi"></div>
            </div>
            <div class="item-warp3">
                <div class="touzi"></div>
                <div class="touzi"></div>
            </div>    
        </div>  
         <!-- 7个骰子 -->
        <div class="item7">
            <div class="item-warp1">
                <div class="touzi"></div>
                <div class="touzi"></div>
                <div class="touzi"></div>
            </div>
            <div class="item-warp2">
                
                <div class="touzi"></div>
                
            </div>
            <div class="item-warp3">
                <div class="touzi"></div>
                <div class="touzi"></div>
                <div class="touzi"></div>
            </div>    
        </div> 
         <!-- 8个骰子 -->
        <div class="item8">
            <div class="item-warp1">
                <div class="touzi"></div>
                <div class="touzi"></div>
                <div class="touzi"></div>
            </div>
            <div class="item-warp2">
                <div class="touzi"></div>
                <div class="touzi"></div>
                
            </div>
            <div class="item-warp3">
                <div class="touzi"></div>
                <div class="touzi"></div>
                <div class="touzi"></div>
        </div> 
       
    </div>
</body>
</html>